<template>
  <el-col :span="6" class="add-home-box" :style="themeOpacity">
    <div class="home-menu-container h100">
      <div class="home-menu-top h100">
        <el-tabs v-model="activeName" class="h100">
          <el-tab-pane label="我的收藏" name="0">
            <div slot="label"><i class="iconfont icon-favorite" style="margin-right: 3px;"></i>我的收藏</div>
            <collection-menu ref="collectionRef" />
          </el-tab-pane>
          <el-tab-pane label="可用应用" name="1">
            <div slot="label"><i class="iconfont icon-menu" style="margin-right: 3px;"></i>可用应用</div>
            <use-app-menu
              ref="appRef"
              :dragOptions="dragOptions"
              @move-to-index="e => $emit('drag-app-index', e)"
              :setting="setting"
            />
          </el-tab-pane>
          <el-tab-pane label="可用卡片" name="2">
            <div slot="label"><i class="iconfont icon-shoucanghezi" style="margin-right: 3px;"></i>可用卡片</div>
            <use-card-menu ref="useCardRef" :dragOptions="dragOptions" :setting="setting" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-col>
</template>

<script>
  import CollectionMenu from './components/CollectionMenu'
  import UseAppMenu from './components/UseAppMenu'
  import UseCardMenu from './components/UseCardMenu'
  export default {
    name: 'MenuContainer',
    data() {
      return {
        activeName: '0',
        appIndex: -1,
        refType: ['collectionRef', 'appRef', 'useCardRef']
      }
    },
    props: {
      dragOptions: {
        type: Object,
        default: () => {}
      },
      themeOpacity: {
        type: Object,
        default: () => {}
      },
      setting: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      activeName: {
        handler(val, oldVal) {
          this.$nextTick(() => {
            const refFunc = this.$refs[this.refType[val]] && this.$refs[this.refType[val]].notify
            refFunc && typeof refFunc === 'function' && refFunc()
          })
        },
        immediate: true
      }
    },
    methods: {},
    components: {
      CollectionMenu,
      UseAppMenu,
      UseCardMenu
    }
  }
</script>

<style scoped lang="scss">
  .add-home-box {
    position: relative;
    border-radius: 5px 0px 0px 10px;
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.3);
  }
  .home-menu-container {
    .home-menu-top {
      & > .el-tabs {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        ::v-deep & > .el-tabs__header {
          .el-tabs__item {
            font-size: 14px;
            padding: 0 20px;
          }
        }
        ::v-deep & > .el-tabs__content {
          flex: 1;
          height: 100%;
        }
        ::v-deep .el-tab-pane {
          height: 100%;
        }
      }
      .usable-content {
        padding: 0 5px 10px;
      }
    }
  }
</style>
